<!DOCTYPE html>
<title>Test that 'mediaControlsEnabled' properly toggles the native controls</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
// |orphanedVideo| is used to check that the setting should not be despatched
// if the MediaControls of a video haven't been initialized.
var orphanedVideo = document.createElement('video');
orphanedVideo.controls = true;

async_test(t => {
  var video = document.querySelector('video');

  internals.mediaPlayerRemoteRouteAvailabilityChanged(video, true);
  t.add_cleanup(() => {
    internals.mediaPlayerRemoteRouteAvailabilityChanged(video, false);
  });

  video.addEventListener('canplaythrough', t.step_func(e => {
    assert_equals(overlayCastButton(video).style.display, "none");
    assert_not_equals(mediaControlsButton(video, "panel").style.display, "none");

    internals.settings.setMediaControlsEnabled(false);
    runAfterLayoutAndPaint(t.step_func(() => {
      assert_equals(mediaControlsButton(video, "panel").style.display, "none");
      assert_equals(overlayCastButton(video).style.display, "none");

      internals.settings.setMediaControlsEnabled(true);
      runAfterLayoutAndPaint(t.step_func_done(() => {
        assert_not_equals(mediaControlsButton(video, "panel").style.display, "none");
        assert_equals(overlayCastButton(video).style.display, "none");
      }));
    }));
  }));

  video.src = '../content/test.ogv';
});
</script>
